$(function(){
// 设置初始化数据，将来传递该数据来渲染页面-->需要修改页面数据时，可修改该数据再渲染页面
let q = {
    pagenum	:   1,     //  是	    int	        页码值
    pagesize:   10,    //  是	    int	        每页显示多少条数据
    cate_id	:   '',    //  否	    string	    文章分类的 Id
    state	:   '',    //  否	    string	    文章的状态，可选值有：已发布、草稿
}
// 需求一：获取后台数据，渲染至页面文章表格展示区-->封装函数
    initArticleList()
    function initArticleList(){
        axios({
            method:'GET',
            url:'/my/article/list',
            params:q
        }).then(({data:res})=>{
            // console.log(res);
            // 获取完数据，渲染页面
            if(res.status){
                return layui.layer.msg(res.message)
            }
            let arr = []
            res.data.forEach(ele=>{
                arr.push(`
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${formatDate(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <a href="/article/art_edit.html?id=${ele.Id}" class="layui-btn-xs layui-btn">修改</a>
                            <button data-id="${ele.Id}" class="delBtn layui-btn layui-btn-danger layui-btn-xs">删除</button>
                        </td>
                    </tr>
                `)
            })
            // 遍历完成
            $('tbody').empty().append(arr.join(''))
            //渲染页码
            renderPage(res.total)
        })
    }

//需求二：自动获取数据，渲染至下拉菜单
initArtCateList()
 //注意：多选框有默认样式无法去除，三方框架选择使用别的方法获取option数据设置样式
 function initArtCateList() {
    axios({
        method: 'GET',
        url: '/my/article/cates',
    }).then(({ data: res }) => {
        // console.log(res)
        if (res.status != 0) {
            return layui.layer.msg(res.message)
        }
        // 渲染文章数据至多选框下拉列表
        let arr = ['<option value="">请选择文章类别</option>']
        res.data.forEach(ele => {
            if (ele.Id > 0) {
                arr.push(`<option value="${ele.Id}">${ele.name}</option>`)
            }
        })
        $('[name="cate_id"]').empty().html(arr.join(''))
        layui.form.render()
    })
}

//需求三：筛选
$('#searchForm').on('submit',function(e){
    e.preventDefault()
    // 渲染页面是通过初始化设置完成的，修改初始化设置来达成渲染页面的功能
    q.cate_id = $("[name=cate_id]").val()
    q.state = $("[name=state]").val()
    initArticleList()
})


// 需求四：分页
function renderPage(total){
    layui.laypage.render({
        elem:'pageBox',
        count:total,
        limit:q.pagesize,
        curr:q.pagenum,
        layout:['cunt','limit','prev','page','next','refresh','skip'],
        limits:[2,3,5,10],
        jump:function(obj,first){
            if(!first){
                q.pagenum = obj.curr,
                q.pagesize = obj.limit,
                initArticleList()
            }
        }
    })
}

// 需求五：删除按钮 -->当删除最后一页最后一项时，会出bug：页码显示为最新页，但是没有数据
    //解决方案：进行判定，如果是当前页的最后一项，则页码减一;如果是第一页，不减
    //细节：响应成功后没有渲染页面前，删除的是数据库中的数据，页面中的数据还在，此时的判定条件需要注意
    $('tbody').on('click','.delBtn',function(){  
        let id = $(this).attr('data-id')
        console.log(id);
        layer.confirm('是否确认删除文章?', {icon: 3, title:'提示'}, function(index){
            // 发送请求
            axios({
                method:'GET',
                url:'/my/article/delete/'+id,
            }).then(({data:res})=>{
                // console.log(res)
                if(res.status){
                    return layui.layer.msg(res.message)
                }
                // 在渲染页面前添加判定条件，注意此时删除的只是服务器的数据
                if( $('.delBtn').length==1&&q.pagenum!=1){
                    q.pagenum--
                }
                initArticleList()
            })
            layer.close(index);
          })
    })

// 需求六：点击修改,当前锚点页面(非index页)跳转至修改修改页面(与发表页功能大致相同)
    //1.修改按钮直接用A链接跳转
    //2.发起ajax请求，获取后台数据，跳转成功，将数据赋值给修改页
       //2.1 需要根据id获取数据，id从哪里来？-->动态渲染的跳转链接身上可以携带id
       //2.2 在动态渲染时，将需要修改文章的id绑定至a链接
    //3.修改页的文章内容下拉菜单也需要ajax发送ajax请求，且需要在页面内容加载前完成
       //3.1 先执行完下拉菜单的ajax请求再执行渲染页面的请求
    //4.三方插件的内容加载-->富文本和cropper



})